<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html lang="zh-CN">
<head>
	<link rel="stylesheet" href="${ctx}/static/wechat/css/style.css">
</head>
<body>
	<header class="ui-header ui-header-positive ui-border-b">
		<i class="ui-icon-return" onclick="history.back(-1)"></i>
		<c:if
			test="${sessionScope.id == question.userSid or sessionScope.isAdmin}">
			<div
				class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-end">
				<i class="ui-icon-delete" id="deleteQuestion"></i>
			</div>
		</c:if>
	</header>
	<footer class="ui-footer ui-footer-btn">
		<section class="ui-input-wrap ui-border-t" style="height: 56px;">
			<div class="ui-input ui-border-radius">
				<input id="commentValue" type="text" name="" value=""
					placeholder="我也说一句...">
			</div>
			<button id="addComment" class="ui-btn">回答</button>
		</section>
	</footer>
	<section class="ui-panel ui-panel-pure ui-border-t"
		style="padding-bottom: 45px">
		<h3>&nbsp;</h3>
		<ul class="ui-list ui-list-pure ui-border-tb">
			<li class="ui-border-t" style="width: auto;">
				<h5 class="ui-flex">
					<span class="ui-avatar-s"> <span
						style="background-image:url(${question.headUrl});"></span>
					</span> <span class="ui-flex ui-flex-align-center">&nbsp;
						${question.name }: </span>
				</h5>
				<h4>${question.questtionContent}</h4>
				<h6 class="ui-flex ui-txt-muted">
					<div class="date">
						<f:formatDate value="${question.createTime }" type="date" />
					</div>
					<div class="ui-flex ui-flex-pack-end" style="width: 84%;">${fn:length(commentList)}回答</font>
				</h6>
			</li>
		</ul>
		<ul class="ui-list ui-list-pure ui-border-tb">
			<c:forEach items="${commentList}" var="item" varStatus="i">
				<li class="ui-border-t ">
					<h5 class="ui-flex">
						<span class="ui-avatar-s"> <span
							style="background-image:url(${item.headUrl }); "></span>
						</span>&nbsp;&nbsp;
						<div
							class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start"
							style="width: 43%;">
							<div>
								<h5>${item.name}:</h5>
							</div>
							<div class="ui-txt-muted">
								<h6>
									<f:formatDate value="${item.createTime }" type="date" />
								</h6>
							</div>
						</div>
						<div class="ui-flex  ui-flex-align-center ui-flex-pack-end"
							style="width: 40%;">
							<div class="ui-icon-like ui-txt-muted" style="font-size: 17px;"
								onclick="addLike('${ctx}/wechat/faq/comment/addLike','${item.id}','${item.countLike}',this)">${item.countLike}</div>
						</div>
					</h5> <c:choose>
						<c:when
							test="${item.userSid == sessionScope.id or sessionScope.isAdmin}">
							<div style="padding-left: 60px;"
								class="<c:if test="${i.first and item.topComment == 2}">ui-tag-hot</c:if>">
								<h5 class="" onclick="deleteThisComment(${item.id},${item.userSid})">${item.comment}</h5>
							</div>
						</c:when>
						<c:otherwise>
							<div
								class="<c:if test="${i.first and item.topComment == 2}">ui-tag-hot</c:if>"
								style="padding-left: 60px;">
								<h5 class="">${item.comment}</h5>
							</div>
						</c:otherwise>
					</c:choose>

				</li>
			</c:forEach>
			<li class="ui-border-t">
				<h5 class="ui-flex ui-txt-muted ui-flex-pack-center ui-txt-muted">——已经没有了——
				</h5>
			</li>
		</ul>
	</section>
	<section class="active"></section>

	<!-- 删除菜单栏 -->
	<div id="menu1" class="ui-actionsheet">
		<div class="ui-actionsheet-cnt">
			<h4>删除该问题和该问题的所有回答</h4>
			<button id="del1" class="ui-actionsheet-del ui-txt-warning">删除</button>
			<button>取消</button>
		</div>
	</div>

	<div id="menu2" class="ui-actionsheet">
		<div class="ui-actionsheet-cnt">
			<h4>选项</h4>
			<button id="del2" class="ui-actionsheet-del ui-txt-warning">删除该回答</button>
			<c:if test="${sessionScope.isAdmin}">
				<button id="topComment" class="ui-actionsheet-del">置顶该回答</button>
				<button id="cancletopComment" class="ui-actionsheet-del">取消置顶</button>
				<button id="guajieReply" class="ui-actionsheet-del">设为瓜姐回复</button>
			</c:if>
			<button>取消</button>
		</div>
	</div>

	<script type="text/javascript">
		$("#topComment").tap(function () {
			$.ajax({
				url:"${ctx}/wechat/faq/comment/status",
				type:'post',
				dataType:'json',
				data:{"id":commentId,"questionId":${question.id},"status":1},
				success:function(result) {
					if (result.code == 1) {
						alert(result.msg);
						location.reload();
					} else {
						alert(result.msg);
					}
				}
			})
		})
		$("#cancletopComment").tap(function () {
			$.ajax({
				url:"${ctx}/wechat/faq/comment/status",
				type:'post',
				dataType:'json',
				data:{"id":commentId,"questionId":${question.id},"status":2},
				success:function(result) {
					if (result.code == 1) {
						alert(result.msg);
						location.reload();
					} else {
						alert(result.msg);
					}
				}
			})
		})
		
		// 删除回复
		var commentId;
		var userId;
		$("#del2").tap(function() {
			$.post("${ctx}/wechat/faq/comment/delete",{"id":commentId},function(result) {
				if (result.code == 1) {
					alert(result.msg);
					location.reload();
				} else {
					alert(result.msg);
				}
			});
		})
		
		$("#deleteQuestion").tap(function() {
			$('#menu1').addClass('show');
		})
		
		$(".ui-actionsheet").tap(function() {
			$('#menu1').removeClass('show');
		})
		
		function deleteThisComment(id,userId1) {
			commentId = id;
			userId = userId1;
			$('#menu2').addClass('show');
		}
		
		$(".ui-actionsheet").tap(function() {
			$('#menu2').removeClass('show');
		})
	
		// 点赞,将对应的评论点赞成功的塞进cookie，如果存在则不允许二次点赞
		function addLike(url,id,likeCount,that) {
			var hasLike = getCookie("comment"+id);
			if (hasLike) {
				alert("你已经点赞过了");
			} else {
				$.ajax({
					url:url,
					type:'post',
					dataType:'json',
					data:{"id":id,"likeCount":likeCount},
					success:function(result) {
						// 点赞后页面显示+1，并添加cookie，并添加颜色
						var t = parseInt(likeCount);
						$(that).text(t+1);
						document.cookie="comment"+id+"=yes";
						$(that).css("color","red");
					}
				})
			}		
		}
		
		// 添加评论
		$("#addComment").tap(function() {
			var commentValue = replaceEmoji($("#commentValue").val());
			if (commentValue) {
				$.ajax({
					url:"${ctx}/wechat/faq/comment/add",
					type:"post",
					dataType:"json",
					data:{"questiongId":${question.id},"comment":commentValue},
					success: function(result) {
						if (result.code == 1) {
							alert("回答成功");
							location.reload();
						} else {
							alert("系统异常")
						}
					}
				})
			} else {
				alert("内容不能为空")
			}
		})
		
		// 设为瓜姐回复
		$("#guajieReply").tap(function() {
			$.ajax({
				url:"${ctx}/wechat/faq/comment/guajieReply",
				type:'post',
				dataType:'json',
				data:{"id":commentId,"userId":userId},
				success:function(result) {
					if (result.code == 1) {
						alert(result.msg);
						location.reload();
					} else {
						alert(result.msg);
					}
				}
			})
			
		})
		
		// 删除该问题和评论的相关方法
		$("#del1").tap(function() {
			$.post("${ctx}/wechat/faq/question/delete",{"id":${question.id}},function(result) {
				if (result.code == 1) {
					alert(result.msg);
					window.location.href="${ctx}/wechat/faq/index";
				} else {
					alert(result.msg);
				}
			});
		})
		
		// ios第三方输入在触发底部的输入框时，输入框被输入法遮挡。此为解决方案
	 	var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
	    $("#commentValue").focus(function(){//在这里
	        interval = setInterval(function(){//设置一个计时器，时间设置与软键盘弹出所需时间相近
	        document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
	        },100)
	    }).blur(function(){//设定输入框失去焦点时的事件
	        clearInterval(interval);//清除计时器
	        document.body.scrollTop = bfscrolltop;
	    });
	</script>

	<!-- 问题列表模板 -->
	<script id="deleteModel" type="text/html">
				<li class="ui-border-t">
					<h5 class="ui-flex">
						<span class="ui-avatar-s">
							<span style="background-image:url(${item.headUrl }); "></span>
						</span>&nbsp;&nbsp;
						<div class="ui-flex ui-flex-ver ui-flex-pack-center ui-flex-align-start" style="width: 43%;">
							<div><h5>${item.name}:</h5></div>
							<div class="ui-txt-muted"><h6><f:formatDate value="${item.createTime }" type="date" /></h6></div>
						</div>
						<div class="ui-flex  ui-flex-align-center ui-flex-pack-end" style="width: 40%;">
							<div onclick="addLike('${ctx}/wechat/faq/comment/addLike','${item.id}','${item.countLike}',this)"><i class="ui-icon-like"  style="font-size: 11px;">${item.countLike}</i></div>
						</div>
					</h5>
					<div style="padding-left: 60px;">
						<h5>${item.comment}</h5>
					</div>
				</li>
	</script>
</body>
</html>
